<template>
  <div>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <!-- 搜索部分 -->
      <el-row>
        <el-col :span="4">
          <el-input v-model="queryInfo.query" placeholder="请输入管理员名"> </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" class="search-btn">查找</el-button>
          <el-button type="primary" icon="el-icon-edit">添加</el-button>
        </el-col>
      </el-row>
      <!-- 内容主体部分 -->
      <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="55">
          <template slot-scope="scope">{{ scope.row.index }}</template>
        </el-table-column>
        <el-table-column prop="portrait" label="头像" width="150">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607254399315&di=4c3d6c4d2333b00cbb7f2f89e76f62dc&imgtype=0&src=http%3A%2F%2Fimg.kutoo8.com%2Fupload%2Fimage%2F73370865%2F140-150313102339%2520%25281%2529_960x540.jpg"
          />
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="120"> </el-table-column>
        <el-table-column prop="gender" label="性别" width="55"> </el-table-column>
        <el-table-column prop="login" label="登录次数" width="120"> </el-table-column>
        <el-table-column prop="loginIP" label="登录IP" width="120"> </el-table-column>
        <el-table-column prop="loginTimer" label="最后时间" width="200"> </el-table-column>
        <el-table-column prop="status" label="状态" width="55"> </el-table-column>
        <el-table-column label="操作" width="249">
          <el-button type="warning" size="mini">重置密码</el-button>
          <el-button type="primary" size="mini">编辑</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Rights',
  data() {
    return {
      queryInfo: {
        query: '',
      },
      currentPage4: 4,
      tableData3: [
        {
          index: 1,
          portrait: '',
          username: '王小虎',
          role: '超级管理员',
          gender: '男',
          login: 5,
          loginIP: '123445656',
          loginTimer: '12:18',
          status: '正常',
          operation: '13124',
        },
        {
          index: 1,
          portrait: '',
          username: '王小虎',
          role: '超级管理员',
          gender: '男',
          login: 5,
          loginIP: '123445656',
          loginTimer: '12:18',
          status: '正常',
          operation: '13124',
        },
        {
          index: 1,
          portrait: '',
          username: '王小虎',
          role: '超级管理员',
          gender: '男',
          login: 5,
          loginIP: '123445656',
          loginTimer: '12:18',
          status: '正常',
          operation: '13124',
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="less" scoped>
.search-btn {
  margin-left: 5px;
}

.cell {
  img {
    width: 100%;
    height: 100%;
  }
}
/deep/.has-gutter {
  .is-leaf {
    .cell {
      text-align: center;
    }
  }
}
/deep/ .el-table__body {
  .el-table__row {
    .cell {
      text-align: center;
    }
  }
}
</style>
